::v-deep .u-tabs {
  transform: translate(8rpx, -10rpx);

  .u-tab-item {
    font-weight: bold;
    transform: translateY(-6rpx);
    transition-property: background-color, color, font-size;
  }
}

.trending-container {
  width: 100%;
  height: fit-content;
  padding: 0 30rpx;

  .trend-content {
    width: inherit;
    height: inherit;
    background-color: #fff;
    border-top: 2rpx solid #f6f6f6;

    .user-info-container {
      width: 100%;
      height: fit-content;
      display: flex;
      flex-direction: row;
      padding: 40rpx 10rpx 30rpx 10rpx;

      .avatar-container {
        width: 80rpx;
        height: 80rpx;
        flex-shrink: 0;
        overflow: hidden;
        border-radius: 150rpx;
        background-color: #f1f1f1;

        image {
          width: inherit;
          height: inherit;
        }
      }

      .user-container {
        width: 100%;
        height: 90rpx;
        padding: 0 20rpx;
        overflow: hidden;

        .username {
          font-size: 30rpx;
          color: #333;
          font-weight: bold;
          line-height: 46rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .post-time {
          font-size: 24rpx;
          color: #aaa;
          line-height: 44rpx;
        }
      }
    }

    .content-container {
      display: -webkit-box;
      padding: 0 10rpx;
      color: #666;
      font-size: 30rpx;
      line-height: 1.8;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal !important;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
    }

    .image-container {
      width: 100%;
      padding: 20rpx 4rpx;
    }

    .tags-container {
      width: 100%;
      height: fit-content;
      padding: 0 10rpx 40rpx 10rpx;
      display: flex;
      flex-direction: row;
      align-items: center;

      .browse-count {
        font-size: 26rpx;
        color: #888;
      }

      .position-tag {
        width: fit-content;
        height: 50rpx;
        padding: 0 30rpx;
        margin-left: auto;
        flex-shrink: 0;
        background-color: #f1f1f1;
        color: #333;
        font-size: 26rpx;
        text-align: center;
        line-height: 50rpx;
        border-radius: 50rpx;

        .fas {
          margin-right: 10rpx;
        }
      }
    }

    .comment-btn-container {
      width: 100%;
      padding: 0rpx 10rpx 30rpx 10rpx;
      display: flex;
      flex: 1;

      .comment-btn {
        width: fit-content;
        height: 50rpx;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 34rpx;
        color: #555;

        &:nth-child(2), &:last-child {
          margin-left: auto;
        }

        .fa-thumbs-up {
          transition-duration: 150ms;
          transition-property: color;
        }

        .liked {
          color: #f4756b;
        }

        text {
          margin-left: 10rpx;
          font-size: 26rpx;
          color: #888;
        }
      }
    }

    &:first-child {
      border-top: 0;
    }
  }

  .load-more {
    width: 100%;
    height: fit-content;
    min-height: 150rpx;
    margin-top: 40rpx;
    padding-bottom: 100rpx;
    padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
    font-size: 28rpx;
    text-align: center;
    color: $uni-text-color-placeholder;

    text {
      margin-left: 10rpx;
    }
  }

  .loading-more {
    height: 150rpx;
    margin-top: 0;
    padding-bottom: 30rpx;
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
  }
}

.focus-trend-list {
  padding: 0;

  .recommend-user-container {
    width: 100%;
    height: fit-content;
    padding: 20rpx 0 10rpx 0;
    border-bottom: 14rpx solid #f6f6f6;

    .title-row {
      width: inherit;
      padding: 0 30rpx;
      display: flex;
      flex-direction: row;
      align-items: center;

      .title {
        font-size: 28rpx;
        font-weight: bold;

        &:before {
          content: '';
          //margin-right: 10rpx;
          //border-radius: 10rpx;
          //border-right: 8rpx solid #f4756b;
        }
      }

      .school {
        display: flex;
        align-items: center;
        margin-left: auto;
        font-size: 26rpx;
        color: #888;

        .fas {
          margin-right: 8rpx;
        }

        text {
          max-width: 40vw;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }

    .content-row {
      width: inherit;

      .user-scroll-view {
        width: inherit;

        .user-container {
          width: fit-content;
          display: flex;
          flex-direction: row;

          .user {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20rpx 14rpx;
            overflow: hidden;

            .avatar {
              width: 12vw;
              height: 12vw;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              background-color: #f6f6f6;
              border-radius: 50%;
              overflow: hidden;

              .avatar-image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #f6f6f6;
              }

              .fas {
                font-size: 36rpx;
                color: #555;
              }
            }

            .username {
              width: 15vw;
              padding: 10rpx 0 0 0;
              font-size: 24rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: center;
            }

            &:first-child {
              padding-left: 30rpx;
            }

            &:last-child {
              padding-right: 30rpx;
            }
          }
        }
      }
    }
  }
}

.edit-trend-btn {
  width: 110rpx;
  height: 110rpx;
  position: fixed;
  bottom: 50rpx;
  right: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 150rpx;
  background-color: #f4756b;

  .fas {
    font-size: 40rpx;
    color: #fff;
  }
}